<template>
	<!-- 会员申请 -->
	<view class="real_name wap">
		<!-- <view class="f1 c1 fwb">
			请完善您的个人信息
		</view> -->
		<view class="bg">
			<view class="group">
				<view class="lab">
					姓名
				</view>
				<view class="inp_box">
					<input type="text" v-model="reqData.TrueName" placeholder-class="placeholderStyle " placeholder="请输入您的姓名">
				</view>
			</view>
		</view>
		<view class="f1 text mt40">请上传身份证的正反面</view>
		<view class="idcard" @click="chooseimg1">
			<block v-if="reqData.isIDCardImg_1">
				<image  :src="reqData.IDCardImg_1" mode="aspectFill" />
			</block>
			<block v-else>
				<view class="icons">
					<image :src="ossPath+'/upload/1711437371700151.png'" mode="" />
				</view>
				<view class="tip f2 c3">请上传身份证人像面</view>
			</block>
			
		</view>
		<view class="idcard2" @click="chooseimg2">
			<block v-if="reqData.isIDCardImg_2">
				<image :src="reqData.IDCardImg_2" mode="aspectFill" />
			</block>
			<block v-else>
				<view class="icons">
					<image :src="ossPath+'/upload/1711437371700151.png'" mode="" />
				</view>
				<view class="tip f2 c3">请上传身份证国徽面</view>
			</block>
		</view>
		<view class="f2 c2 wap mt40">
			温馨提示：用户提现必须实名认证，认证通过后才可以提现
		</view>
		<view class="btn m40" @click="sub">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reqData: {
					TrueName: "",
					IDCardImg_1: '',
					isIDCardImg_1:false,
					IDCardImg_2: '',
					isIDCardImg_2:false,
					ID: "",
				},
				ossPath:null,
			}
		},
		methods: {
			async sub() {
				if (this.reqData.TrueName == "") {
					this.$pv.msg('请输入姓名');
					return;
				}
		if (this.reqData.IDCardImg_1 == "") {
			this.$pv.msg('请上传身份证头像面');
			return;
		}
		
		if (this.reqData.IDCardImg_2 == "") {
			this.$pv.msg('请上传身份证国徽面');
			return;
		}
				this.$pv.load();

				let res = await this.$api.post('User/BindIDCard', {
					TrueName: this.reqData.TrueName,
					IDCardImgs: this.reqData.IDCardImg_1+','+this.reqData.IDCardImg_2
				});
				setTimeout(() => {
					this.nav_back();
				})
			},
			async chooseimg1(e) {
				
				
				try {
			
					let _this = this;
					uni.chooseMedia({
						count: 1, //默认9
						mediaType: ['image'],
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: async function(res) {
							console.log(res, "------look")
							let r = await _this.uploading(res.tempFiles[0].tempFilePath);
							
							console.log(r);
							
							_this.reqData.IDCardImg_1 = r;
							_this.reqData.isIDCardImg_1=true;
						}
					})
				} catch (error) {
					this.$pv.msg('图片上传失败');
				}
			},
			async chooseimg2(e) {
				try {

					let _this = this;
					uni.chooseMedia({
						count: 1, //默认9
						mediaType: ['image'],
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: async function(res) {
							console.log(res, "------look")
							let r = await _this.uploading(res.tempFiles[0].tempFilePath);
							_this.reqData.IDCardImg_2 = r;
							_this.reqData.isIDCardImg_2=true;
						}
					})
				} catch (error) {
					this.$pv.msg('图片上传失败');
				}
			},
			async uploading(url, tempKey) {
				let _this = this;
				let r = await this.$api.upload(
					'/Community/Upload', {
						path: url
					},
					pro => {
						if (pro != 100) {
							_this.$pv.load('已上传' + pro + '%');
						} else {
							setTimeout(() => {
								_this.$pv.closeLoad();
							}, 300);
						}
					}
				);
				return r
			}
		},
		onLoad(args) {
			let user = uni.getStorageSync('user');
			//this.reqData.ID = user.UserID;
		},
		onShow(){
			this.ossPath = this.$ossPath
		},
	}
</script>

<style lang="scss">
page{
	background-color: #F6F6F6;
}
	.real_name {
		padding-top: 40rpx;
		padding-bottom: 50rpx;
		box-sizing: border-box;
	}

	.group {
		display: flex;
		align-items: center;
		height: 90rpx;
		border-bottom: 1px solid #404040;
		margin-left: 30rpx;
		margin-right: 30rpx;

		&:last-child {
			border-bottom: none;
		}

		.lab {
			padding-right: 10rpx;
			color: #333333;
			font-size: 32rpx;
		}

		.inp_box {
			flex: 1;

			input {
				width: 100%;
				text-align: right;
			}
			.placeholderStyle{
				color: #999999;
				font-size: 32rpx;
			}
		}

		.icon_box {
			height: 40rpx;
			width: 40rpx;
			line-height: 40rpx;
		}
	}
	.text{
		color: #333333;
		font-size: 32rpx;
	}
	.bg {
		// margin-top: 30rpx;
		// border-radius: 16rpx;
		background: #fff;
	}

	.mt40 {
		margin-top: 40rpx;
	}

	.idcard {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 40rpx auto;
		width:500rpx;
		height: 350rpx;
		// background: #202020;
		background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17114370217821145.png');
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 16px;

		image{
			width:100%;
			height:100%
		}
		.icons {
			// background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
			height: 120rpx;
			width: 120rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				height: 120rpx;
				width: 120rpx;
			}
		}

		.tip {
			margin-top: 20rpx;
		}
	}
	.idcard2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 40rpx auto;
		width:500rpx;
		height: 350rpx;
		// background: #202020;
		background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711437129613792.png');
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 16px;

		image{
			width:100%;
			height:100%
		}
		.icons {
			// background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
			height: 120rpx;
			width: 120rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				height: 120rpx;
				width: 120rpx;
			}
		}

		.tip {
			margin-top: 20rpx;
		}
	}

	.m40 {
		margin-top: 40rpx;
	}
</style>